<template>
    <div class="destiny" id="demo1">
         <el-card class="structure">
                <el-card v-if="palySwitch" @click.native="playGame" class="playgame">
                    <span style="font-size:60px;color:skyblue">点击任意位置<br>开始游戏</span>                    
                </el-card>
                <el-card v-if="indexSwitch" class="playgame">
                    <el-button type="primary" @click="newGame" round size="big" class="btn" >开始游戏</el-button>
                </el-card>
            <el-row >
                <el-col>
                    <el-card shadow="always" v-if="formSwitch" class="playgame">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="form.path"
                        ></el-image>
                        <el-form ref="form" :model="form" label-width="80px" >  
                            <el-form-item label="英雄" style="width: 400px" >          
                                <el-radio-group v-model="form.name" @change="getName" >
                                    <el-radio-button 
                                    v-for="hero in HeroList"
                                    :key="hero.id"
                                    :label="hero.name"
                                    :value="hero.id"  
                                    ></el-radio-button>
                                </el-radio-group>
                                <el-descriptions title="英雄信息" >  
                                    <el-descriptions-item label="名字" label-class-name="my-label" content-class-name="my-content">{{ form.name }}</el-descriptions-item>
                                    <el-descriptions-item label="等级" >{{ form.level }}</el-descriptions-item>
                                    <el-descriptions-item label="血量" >{{ form.blood }}</el-descriptions-item>
                                    <el-descriptions-item label="经验" >{{ form.exp }}</el-descriptions-item>                                
                                </el-descriptions> 
                                <el-form-item>
                                    <el-button type="primary" @click="selectHero" round size="big">选择</el-button>
                                </el-form-item>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
            <el-card v-if="gameSwitch" style="width: 800px; height: 100%" class="battle">
                当前关卡{{ this.num + 1 }}
                <p label="名字">{{ mform.name }}</p>
                <p label="血量">血量: {{ mform.blood }}</p>
                <div v-for="skill in MonsterSkillList" :key="skill.index" >
                    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" @click.native="mtouch(skill)">
                            <span style="color:skyblue">{{ skill.name }} </span>
                            <br>
                            {{ skill.summary }}
                            <br>
                            至少包含<span style="color:red">{{ skill.premise }}</span> 暗元素
                        </el-card>
                    </el-col>
                </div>
                <el-image
                        style="width: 100px; height: 100px"
                        :src="mform.path"
                        @click="battle"
                ></el-image>
                
                <el-form ref="gamefrom" :model="gamefrom" >
                    <div class="footer">                        
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="form.path"
                        ></el-image>     
                        <div>            
                            <p label="名字">{{ form.name }}</p>
                             <p label="血量">血量: {{ form.blood }}</p>
                            <p label="等级">等级: {{"Lv" + form.level }}</p>
                        </div>
                        <el-button :disabled=disabled style="width: 100px; height: 100px" type="primary" plain @click="OpenLibrary">牌库</el-button>
                    </div>
                    <!-- 牌库 -->
                    <el-dialog
                    title="牌库"
                    :visible.sync="dialogVisible"
                    width="60%"                            
                    >
                        <!-- 牌库 -->
                        <div class="Skillclass">
                            <el-card style="width:500px">
                                <span>牌库</span>
                                <div v-for="skill in SkillList" :key="skill.id" >                                
                                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                                        <el-card shadow="hover" style="width:100px" @click.native="addDeck(skill)">
                                           <span style="color:skyblue"> {{ skill.name }} <br></span>
                                           <span style="color:red"> 元素{{ skill.premise }}个 <br> </span>
                                            {{ skill.summary }} <br>
                                        </el-card>
                                    </el-col>
                                </div>
                            </el-card>
                            <!-- 卡组 -->
                            <el-card style="width:300px" class="Deckclass">
                                <el-form ref="gamefrom" :model="gamefrom" v-if="gameSwitch" >                           
                                    <span>当前卡组</span>
                                    <div v-for="deck in DeckList" :key="deck.id">                                
                                            <el-tooltip class="item" effect="dark" :content=deck.summary placement="right">
                                            <el-card class="box-card" shadow="hover" style="width:200px;height:40px;padding:0px" 
                                            @click.native="ReduceDeck(deck)">
                                                {{ deck.name }}
                                            </el-card>                                            
                                            </el-tooltip>
                                    </div>
                                </el-form>
                            </el-card>
                            <br>                            
                        </div>
                        <span>
                            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-form>
                <div v-for="deck in DeckList" :key="deck.id" >
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                        <el-card shadow="hover"  @click.native="touch(deck)" >
                           <span style="color:skyblue"> {{ deck.name }} </span>
                            <br>
                            {{ deck.summary }}
                            <br>
                            至少包含<span style="color:red">{{ deck.premise }}</span> 光元素
                        </el-card>
                    </el-col>
                </div>
                <div v-for="a in this.arrs" :key="a.index" >
                    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                        <el-card shadow="hover">
                            {{a}}
                        </el-card>
                    </el-col>
                </div>
            </el-card>
            <el-button @click="MR" >投掷 {{(3 - +this.MRN) }}</el-button>
            <el-button @click="over" >结束回合</el-button>

            
               
            
        </el-card>
    </div>
</template>

<script>
import { Hero }  from '@/api/hero'
import { Skill } from '@/api/skill'
import { Monster } from '@/api/monster'
import { Skillmonster } from '@/api/skillmonster'
export default {
    data() {
        return {
            form:{
                id : '',
                name : '安度因',
                level : '',
                exp : '',
                blood : 0,
                path : ''
            },
            mform:{
                id : 0,
                name : '穴居人',
                level : '',
                exp : '',
                blood : 0,
                path : ''
            },
            gamefrom:{

            },
            HeroList : [],
            SkillList : [],
            DeckList : [],

            MonsterList: [],
            MonsterSkillList: [],


            palySwitch : true,
            indexSwitch : false,
            formSwitch : false,
            gameSwitch : false,
            dialogVisible : false,
            battleSwitch: false,
            arrs:[],
            MRN:0,
            num:0,
            disabled:false,
        }
    },
    methods: {
        //随机骰子
   
        MR(){
            if(this.DeckList.length == 0){
                this.$message.error('对战开始前需构建卡组')
                return
            }
            this.disabled = true
            if(this.MRN >=3){
                 this.$message.error('每回合最多投掷三次')
                 return
            }
            
            this.arrs = [];
            var arr = ["光","暗","火","水","岩"];
            for(var i=0;i<5;i++){
                var a = Math.round(Math.random()*4);
                this.arrs.push(arr[a]);
            }
            this.MRN++;
            
        },
        async over(){
            if(this.DeckList.length == 0){
                this.$message.error('对战开始前需构建卡组')
                return
            }
            
            this.DeckList.forEach(skill => {
                skill.buff = 1
            });
            
            // this.MonsterSkillList.buff = 1
            this.MRN = 0
            this.arrs = [];
            const {data: { data: MonsterSkillList } }   = await Skillmonster(this.mform.id)
            this.MonsterSkillList = MonsterSkillList
            this.mtouch(this.MonsterSkillList);
        },
        skill(){
            // for(var i=0;i<5;i++){
            //     if(arrs[i]=="光" && deck.name == "圣光惩击"){
            //         {{ }}
            //     }
            // }
        },
        // 获取英雄列表
        async getHero(){
            const {data: { data: HeroList } }   = await Hero()
		    this.HeroList = HeroList
            this.getName()
            
        },
        async getMonster(){
            const {data: { data: MonsterList } }   = await Monster()
            this.MonsterList = MonsterList
            this.getName()
        },
        // 开始游戏
        getName(){
            this.HeroList.forEach( x => {
               if(x.name === this.form.name){
                    this.form.id = x.id
                    this.form.level  = x.level
                    this.form.exp  = x.exp
                    this.form.blood  = x.blood
                    this.form.path = x.path
               }
            })

            const int = Math.round(Math.random()*1)
            this.mform = this.MonsterList[int]
           
        },
        playGame(){
            this.palySwitch = false
            this.indexSwitch = true            
        },
        // x新游戏
        //控制不同form表单的显示
        newGame(){
            this.indexSwitch = false
            this.formSwitch = true            
        },
        //控制不同form表单的显示
        // 继续游戏
        oldGame() {
            this.indexSwitch = false
            this.formSwitch = true
        },
        async selectHero(){
            this.formSwitch = false
            this.gameSwitch = true
            const {data: { data: MonsterSkillList } }   = await Skillmonster(this.mform.id)
            this.MonsterSkillList = MonsterSkillList
            
        },
        battle(){
            // this.gameSwitch = false
            // this.battleSwitch = true

        },

        // 查询当前角色所有的技能
        async OpenLibrary(){
            this.dialogVisible = true
            const {data: { data: SkillList } }   = await Skill(this.form.id)
            this.SkillList = SkillList
            // const {data: { data: MonsterSkillList } }   = await Skillmonster(this.mform.id)
            // this.MonsterSkillList = MonsterSkillList
            // console.log(this.MonsterSkillList)
            
        },
        // 点击添加到卡组 param 对象技能 
        addDeck(skill) {
            let str = 0
            if(this.DeckList.length > 0) {
                if(this.DeckList.length < 6){
                    this.DeckList.forEach( deck => {
                        if(deck.name === skill.name){
                            this.$message.error('重复了')
                             str ++
                        }
                    })
                      if(str == 0) this.DeckList.push(skill) 
                }else{
                    this.$message.error('卡组最多6张卡牌')
                }
            }else this.DeckList.push(skill)      
        },
        // 点击删除卡组 恢复牌库
        ReduceDeck(deck) {
            console.log(deck)
            this.DeckList.pop(deck)
        },
        qarrs(arrs){
            var n = 0;
            for(var i = 0 ;i<5;i++){
                if(arrs[i] == "光"){
                    n++;
                }
            }
            return n;
        },
        touch(deck){
            if(deck.name == "圣光闪现" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "惩黑除恶" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "冲锋陷阵" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "暂避锋芒" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "治疗术" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "无尽大军" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "圣光惩击" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "圣光降临" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "暗中生长" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "灵魂鞭笞" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "净化碎片" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "小石头" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "水波纹" && this.qarrs(this.arrs) >=deck.premise
            || deck.name == "小火球" && this.qarrs(this.arrs) >=deck.premise
            ){
                if(deck.buff == 0){
                    this.$message.error('每张卡片每回合只能释放一次')
                    return;
                }
                if(deck.harm > 0){
                    this.mform.blood = this.mform.blood - deck.harm
                    this.$message.success('造成'+ deck.harm + "伤害,"+'当前怪物血量'+this.mform.blood)
                }else{
                    this.form.blood = +this.form.blood + -deck.harm
                    this.$message.success('恢复'+ -deck.harm + "血量,"+'当前血量'+this.form.blood)
                }
                if(deck.harm == 0){
                    this.form.blood = +this.form.blood + +this.form.blood/2
                }
                
                if(this.mform.blood <= 0){
                    
                    if(++this.num == 5){
                        this.$message.success('胜利通关')
                        this.indexSwitch = true
                            this.gameSwitch = false
                            this.arrs = []
                            this.DeckList = []
                            // this.MonsterSkillList = []
                            this.form.name = '安度因'
                            this.disabled = false
                        return
                    }
                    
                    this.$message.success('胜利')
                    this.disabled = true
                    this.getMonster();
                    this.mform.blood = this.mform.blood + this.mform.blood/4
                }

                deck.buff = 0
            }else{
                if(this.arrs.length == 0){
                    this.$message.error('请先进行投掷')
                    return
                }
                this.$message.error('元素个数不够')
            }
        },
        Mqarrs(arrs){
            var n = 0;
            for(var i = 0 ;i<5;i++){
                if(arrs[i] == "暗"){
                    n++;
                }
            }
            return n;
        },
        mtouch(MonsterSkillList){
            

            
            
            for(var i = 0 ; i < 4 ;i++){
                if(this.MRN >= 3 ){
                    // alert('敌方回合结束')
                    alert('敌方回合结束')
                    //this.$message.success('敌方回合结束')
                    //this.MonsterSkillList = []
                    this.arrs = []
                    this.MRN = 0
                    return
                }
                this.MR()
               if (MonsterSkillList[i].name == "圣光惩击" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "圣光降临" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "神圣新火" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "暗中生长" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "灵魂鞭笞" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "小石头" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "水波纹" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                || MonsterSkillList[i].name == "小火球" && this.Mqarrs(this.arrs) >=MonsterSkillList[i].premise
                ){
                    if(MonsterSkillList[i].buff == 1 ){
                        if(MonsterSkillList[i].harm > 0){
                            this.form.blood = this.form.blood - MonsterSkillList[i].harm
                            
                            alert(('怪物对你造成了' + MonsterSkillList[i].harm + '伤害'))
                            
                        }else{
                            this.mform.blood = +this.mform.blood + -MonsterSkillList[i].harm
                            alert(('怪物恢复了' + -MonsterSkillList[i].harm + '血量'))
                            
                        }
                        MonsterSkillList[i].buff = 0
                        if(this.form.blood <=0){
                            alert('闯关失败')
                            // this.$message.error('闯关失败')
                            this.indexSwitch = true
                            this.gameSwitch = false
                            this.arrs = []
                            this.DeckList = []
                            // this.MonsterSkillList = []
                            this.form.name = '安度因'
                            this.disabled = false
                            return
                        }
                    }
            }
                
            }
            
            
        },
        // 清空表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            dialogVisible = false
        }

        
    },
    created() {
        this.getHero()
        this.getMonster()    
    },
    watch:{

    }
}
</script>

<style scoped>
.destiny {
    
	/* 设置绝对定位 */
	position: absolute;
	/* 占满浏览器 */
	width: 100%;
	/* 全局css必须设置height:100%;否则本局无效 */
	height: 100%;
	/* 开启弹性盒子 */
	display: flex;
	/* 主轴居中 */
	justify-content: center;
	/* 交叉轴居中 */
	align-items: center;
    
}
.el-col {
    border-radius: 10px;
}

.Skillclass{
    /* 开启弹性盒子 */
	display: flex;
	/* 主轴居中 */
	justify-content: center;
}
.Deckclass{
    /* 开启弹性盒子 */
	display: flex;
	/* 主轴居中 */
	justify-content: center;
    padding: 0;

}
.structure{
    height: 100%;
    width: 1000px;
    /* 开启弹性盒子 */
	display: flex;
	/* 主轴居中 */
	justify-content: center;
	/* 交叉轴居中 */
	align-items: center;
}
.playgame{
    height: 1000px;
    width: 1000px;
    /* 开启弹性盒子 */
	display: flex;
	/* 主轴居中 */
	justify-content: center;
	/* 交叉轴居中 */
	align-items: center;
    background-image: url('../image/bj.webp');
    /* background-size: 1000px 100%; */
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* opacity: 0.5; */
    /* position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
}
.footer{
    display: flex;
    /* align-self: flex-end; */
    justify-content: space-between;
    align-items: center;
    
}
/* .destiny{
    background-image: url('D:\\work\\homework\\imgs\\bj.webp');
    opacity: 0.5;
} */
/* #demo1{
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
    } */
#demo1:before{
        background-image: url('../image/bj.webp');
        background-size: cover;
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        /* top: 0; */
        /* left: 0; */
        z-index: -1;/*-1 可以当背景*/
        -webkit-filter: blur(3px);
        filter: blur(3px);
}
.battle{
    /* display: flex; */
    /* align-items: center; */
}
.my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
</style>